<template>
  <div>
    <!-- 筛选框 -->
    <van-dropdown-menu >
      <!-- v-model决定选择了哪个 而options是选项 -->
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="hdPriceChange" />
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="hdCateChange" />
    </van-dropdown-menu>

    <!-- 内容为空时搜索提示 -->
    <van-empty image="search" description="暂无此类商品" v-if="productsList.length==0" />
    <!-- 商品列表 -->
    <Products :productsList="productsList" v-else></Products>
    
  </div>
</template>

<script>
import Products from '@/components/common/Products'
export default {
  name: "",
  components: {
      Products
  },
  props: ['productsList','filterCategory'],
  data() {
    return {
      value1: 0,
      value2: '',
      option1: [
        { text: "价格由低到高", value: 'asc' },
        { text: "价格由高到低", value: 'desc' }
      ]
    };
  },
  methods: {
    hdCateChange(val){
      this.$emit('hdCateChange',val)
    },
    hdPriceChange(val){
      this.$emit('hdPriceChange',val)
    }
  },
  beforeUpdate(){
    // 父组件中传进来的filterCategory，在created还不能拿到。这里最好发办法在beforeUpdate拿
    this.filterCategory.forEach(item => {
      if(item.checked){
        this.value2 = item.value
      }
    })
  },
  computed: {},
};
</script>

<style scoped lang="less">
</style>
